<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>心愿清单</title>
    <link rel="stylesheet" type="text/css" href="../static/css/todo.css">
    <link rel="stylesheet" href="../static/css/mavo.css"/>
    <script src="../static/js/mavo.js"></script>
    <style>
        .menu-item, .menu-open-button {
            background: #ffb6b9;
            border-radius: 100%;
            width: 80px;
            height: 80px;
            margin-left: -40px;
            position: absolute;
            top: 20px;
            color: white;
            text-align: center;
            line-height: 80px;
            transform: translate3d(0, 0, 0);
            transition: transform ease-out 200ms;
        }

        .menu-open {
            display: none;
        }

        .hamburger {
            width: 25px;
            height: 3px;
            background: white;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -12.5px;
            margin-top: -1.5px;
            transition: transform 200ms;
        }

        .hamburger-1 {
            transform: translate3d(0, -8px, 0);
        }

        .hamburger-2 {
            transform: translate3d(0, 0, 0);
        }

        .hamburger-3 {
            transform: translate3d(0, 8px, 0);
        }

        .menu-open:checked + .menu-open-button .hamburger-1 {
            transform: translate3d(0, 0, 0) rotate(45deg);
        }

        .menu-open:checked + .menu-open-button .hamburger-2 {
            transform: translate3d(0, 0, 0) scale(0.1, 1);
        }

        .menu-open:checked + .menu-open-button .hamburger-3 {
            transform: translate3d(0, 0, 0) rotate(-45deg);
        }

        .menu {
            position: absolute;
            top: 10px;
            left: 200px;
            margin-left: -190px;
            padding-top: 20px;
            padding-left: 190px;
            width: 380px;
            height: 250px;
            box-sizing: border-box;
            font-size: 16px;
            text-align: left;
        }

        .menu-item:hover {
            background: white;
            color: #ffb6b9;
        }

        .menu-item:nth-child(3) {
            transition-duration: 70ms;
        }

        .menu-item:nth-child(4) {
            transition-duration: 130ms;
        }

        .menu-item:nth-child(5) {
            transition-duration: 190ms;
        }

        .menu-item:nth-child(6) {
            transition-duration: 250ms;
        }

        .menu-item:nth-child(7) {
            transition-duration: 310ms;
        }

        .menu-open-button {
            z-index: 2;
            transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition-duration: 400ms;
            transform: scale(1.1, 1.1) translate3d(0, 0, 0);
            cursor: pointer;
        }

        .menu-open-button:hover {
            transform: scale(1.2, 1.2) translate3d(0, 0, 0);
        }

        .menu-open:checked + .menu-open-button {
            transition-timing-function: linear;
            transition-duration: 200ms;
            transform: scale(0.8, 0.8) translate3d(0, 0, 0);
        }

        .menu-open:checked ~ .menu-item {
            transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
        }

        .menu-open:checked ~ .menu-item:nth-child(3) {
            transition-duration: 160ms;
            transform: translate3d(114.42548px, 11.48084px, 0);
        }

        .menu-open:checked ~ .menu-item:nth-child(4) {
            transition-duration: 240ms;
            transform: translate3d(77.18543px, 85.2491px, 0);
        }

        .menu-open:checked ~ .menu-item:nth-child(5) {
            transition-duration: 320ms;
            transform: translate3d(0.09158px, 114.99996px, 0);
        }

        .menu-open:checked ~ .menu-item:nth-child(6) {
            transition-duration: 400ms;
            transform: translate3d(-77.04956px, 85.37192px, 0);
        }

        .menu-open:checked ~ .menu-item:nth-child(7) {
            transition-duration: 480ms;
            transform: translate3d(-114.40705px, 11.66307px, 0);
        }
    </style>
</head>
<body>
<nav class="menu">
    <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
    <label class="menu-open-button" for="menu-open">
        <span class="hamburger hamburger-1"></span>
        <span class="hamburger hamburger-2"></span>
        <span class="hamburger hamburger-3"></span>
    </label>

    <a href="/" class="menu-item"> 主页 </a>
    <a href="/todo" class="menu-item"> 心愿清单 </a>
    <a href="/upload" class="menu-item"> 美食菜谱 </a>
    <a href="/hot" class="menu-item"> 热榜集合 </a>
    <a href="/log" class="menu-item"> 日志系统 </a>
</nav>
<section mv-app="todoapp" class="todoapp"
         mv-bar="none" mv-storage="local"
         mv-autosave="3"
         mv-mode="edit"
         mv-init="#data">
    <header class="header">
        <h1>心愿清单</h1>
        <form mv-action="set(newTodo, newTodo.trim()), if(newTodo != '', add(newTodo, todo) & set(newTodo, ''))">
            <input property="newTodo" class="new-todo"
                   placeholder="在这里写下心愿叭~"
                   autofocus>
        </form>
    </header>
    <!-- 没有任务时隐藏，有代办事项时显示 -->
    <section hidden="[count(todo) = 0]" class="main">

        <input property="toggleAll" id="toggle-all"
               class="toggle-all" type="checkbox"
               checked="[todoLeft = 0]">
        <label for="toggle-all" mv-action="set(done, !toggleAll)">
            全部完成
        </label>

        <ul class="todo-list">
            <li mv-multiple="todo"
                class="[if(done, 'completed')]"
                hidden="[(done and activeFilter = 'active') or (!done and activeFilter = 'completed')]">
                <div class="view">
                    <input property="done" class="toggle" type="checkbox">
                    <label property="text">看一次海上日出</label>
                    <button class="destroy" mv-action="delete(todo)"></button>
                </div>
            </li>
        </ul>
    </section>
    <!-- 默认情况下，footer隐藏，当有待办事项时显示 -->
    <footer hidden="[count(todo) = 0]" class="footer">

        <meta property="todoDone" content="[count(todo where done)]">
        <meta property="todoLeft" content="[count(todo where !done)]">

        <!-- 左下角计数 -->
        <span class="todo-count">
			<strong mv-value="todoLeft">0</strong>
			[if(todoLeft = 1, '个心愿', '个心愿')] 未完成
		</span>

        <meta property="activeFilter" content="all" mv-storage="none">
        <ul class="filters">
            <li>
                <a class="[if(activeFilter = 'all', 'selected')]"
                   mv-action="set(activeFilter, 'all')">汇总</a>
            </li>
            <li>
                <a class="[if(activeFilter = 'active', 'selected')]"
                   mv-action="set(activeFilter, 'active')">想做</a>
            </li>
            <li>
                <a class="[if(activeFilter = 'completed', 'selected')]"
                   mv-action="set(activeFilter, 'completed')">已做</a>
            </li>
        </ul>
        <!-- 全部完成或者删除后隐藏 ↓ -->
        <button hidden="[todoDone = 0]"
                class="clear-completed"
                mv-action="delete(todo where done)">
            清除所有已完成的心愿
        </button>
    </footer>
</section>
<footer class="info">
    <p>jiel</p>

</footer>

<div id="data" hidden>
    {
    "todo": [
    {
    "done": false,
    "text": "看一次海上日出"
    },
    {
    "text": "寄一张明信片给他",
    "done": true
    },
    {
    "text": "吃一次濑粉",
    "done": false
    },
    {
    "text": "试一次潜水",
    "done": true
    },
    ]
    }
</div>
</body>
</html>